<template>
  <div class="supplier-info-container">
    <!-- 基本信息部分 -->
    <div class="info-section">
      <div class="section-title">基本信息</div>

      <div class="form-item">
        <div class="form-label required">店铺名</div>
        <input
          type="text"
          class="form-input"
          placeholder="请输入您的店铺名称"
          v-model="store.name"
        />
      </div>

      <div class="form-item">
        <div class="form-label">店长名</div>
        <input
          type="text"
          class="form-input"
          placeholder="请输入您的店长名"
          v-model="store.store_manager_name"
        />
      </div>

      <div class="form-item">
        <div class="form-label">邮件地址</div>
        <input
          type="text"
          class="form-input"
          placeholder="请输入您的邮件地址"
          v-model="store.email_address"
        />
      </div>

      <div class="form-item">
        <div class="form-label required">联系电话</div>
        <input
          type="tel"
          class="form-input"
          placeholder="请输入您的联系电话"
          v-model="store.mobile"
        />
      </div>

      <div class="form-item">
        <div class="form-label required">所属地区</div>
        <div class="form-select" @click="selectRegion">
          <text class="form-select-text">{{
            (store.region && store.region.join("-")) || "请选择省-市-区"
          }}</text>
          <text class="gui-block-text gui-icons select-arrow">&#xe69e;</text>
        </div>
      </div>

      <div class="form-item">
        <div class="form-label required">详细地址</div>
        <text class="form-select-text address-text">{{ store.address }}</text>
        <div class="location-btn" @click="getLocation">定位</div>
      </div>
    </div>

    <!-- 证件上传部分 -->
    <div class="upload-section">
      <div class="section-title">上传证件</div>
      <div class="upload-item">
        <div class="upload-label">营业执照</div>
        <div class="upload-content">
          <div
            class="upload-preview"
            v-if="store.business_license"
            @click.stop="previewImg('business_license')"
          >
            <gui-image
              :width="160"
              :height="160"
              :src="store.business_license"
              class="preview-img"
              mode="cover"
            ></gui-image>
            <div
              class="delete-btn"
              @click.stop="deleteImage('business_license')"
            >
              <span class="delete-icon">×</span>
            </div>
          </div>
          <div
            class="upload-btn"
            v-else
            @click="uploadImage('business_license')"
          >
            <div class="upload-icon">+</div>
            <div class="upload-text">上传照片</div>
          </div>
        </div>
      </div>

      <div class="upload-item">
        <div class="upload-label">店铺logo</div>
        <div class="upload-content">
          <div
            class="upload-preview"
            v-if="store.logo"
            @click.stop="previewImg('logo')"
          >
            <gui-image
              :width="160"
              :height="160"
              :src="store.logo"
              class="preview-img"
              mode="cover"
            />
            <div class="delete-btn" @click.stop="deleteImage('logo')">
              <span class="delete-icon">×</span>
            </div>
          </div>
          <div class="upload-btn" v-else @click="uploadImage('logo')">
            <div class="upload-icon">+</div>
            <div class="upload-text">上传照片</div>
          </div>
        </div>
      </div>
    </div>
    <gui-area-picker
      :value="store.region"
      ref="areaPickerRef"
      @confirm="confirmRegion"
    />

    <!-- 保存按钮 -->
    <div class="save-btn-container">
      <button
        class="save-btn"
        @click="saveInfo"
      >
        保存
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { getStoreInfo, editStoreInfo } from "@/apiShop/store";
import { showToast } from "@/utils/helper";
import { upLoadOss } from "@/api/common";
// 供应商信息数据
const store = ref({
  name: "",
  mobile: "",
  region: [],
  province: "",
  city: "",
  area: "",
  lng: "",
  lat: "",
  address: "",
  business_license: "",
  logo: "",
});

const rules = ref({
  name: { required: true, msg: "请输入店铺名称" },
  mobile: {
    required: true,
    msg: "请输入联系电话",
    other: /^1[3-9]\d{9}$/,
    otherMsg: "请输入正确的联系电话",
  },
  region: { required: true, msg: "请选择所属地区" },
  address: { required: true, msg: "请输入详细地址" },
  business_license: { required: true, msg: "请上传营业执照" },
  logo: { required: true, msg: "请上传店铺logo" },
});

const areaPickerRef = ref(null);
// 选择地区
const selectRegion = () => {
  // 这里可以调用地区选择器
  areaPickerRef.value.open();
};

// 获取位置
const getLocation = () => {
  uni.chooseLocation({
    type: "gcj02",
    latitude: store.value.lat,
    longitude: store.value.lng,
    success: (res) => {
      store.value.address = res.address;
      store.value.lat = res.latitude;
      store.value.lng = res.longitude;
    },
  });
};

// 上传图片
const uploadImage = (type) => {
  uni.chooseImage({
    count: 1,
    success: async (res) => {
      // 显示上传中
      const suffix = res.tempFilePaths[0].split(".");
      const imgArr = ["jpg", "jpeg", "png"];
      if (!imgArr.includes(suffix[1])) {
        showToast("请上传图片格式为jpg,jpeg,png的图片");
        return;
      }
      uni.showLoading({
        title: "上传中...",
      });
      upLoadOss(res.tempFilePaths[0])
        .then((value) => {
          store.value[type] = value;
          uni.hideLoading();
        })
        .catch((err) => {
          uni.hideLoading();
          showToast(err.message);
        });
    },
    fail: (e) => {
      console.log("上传失败", e);
    },
  });
};

const previewImg = (type) => {
  uni.previewImage({
    urls: [store.value[type]],
  });
};

// 删除图片
const deleteImage = (type) => {
  store.value[type] = "";
};

const checkRules = () => {
  for (let key in rules.value) {
    if (rules.value[key].required && !store.value[key]) {
      showToast(rules.value[key].msg);
      return false;
    } else if (rules.value[key].required && store.value[key]) {
      if (
        rules.value[key].other &&
        !rules.value[key].other.test(store.value[key])
      ) {
        showToast(rules.value[key].otherMsg);
        return false;
      }
    }
  }
  return true;
};
// 保存信息
const saveInfo = async () => {
  const res = checkRules();
  if (!res) return;
  console.log("保存信息", store.value);
  await editStoreInfo(store.value);
  uni.navigateBack();
};

const confirmRegion = (res) => {
  store.value.region = res.names;
  store.value.province = res.names[0];
  store.value.city = res.names[1];
  store.value.area = res.names[2];
};

const getStoreInfoData = async () => {
  const res = await getStoreInfo();
  store.value = res;
  store.value.region = [
    store.value.province,
    store.value.city,
    store.value.area,
  ];
};

onLoad(async () => {
  await getStoreInfoData();
});
</script>

<style scoped>
.supplier-info-container {
  background-color: #f5f5f5;
  padding-bottom: 40rpx;
}

/* 基本信息部分样式 */
.info-section,
.upload-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 0 30rpx;
}

.section-title {
  color: #0066ff;
  font-size: 28rpx;
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
}

.form-item {
  display: flex;
  padding: 30rpx 0;
  border-bottom: 1px solid #eee;
  position: relative;
}

.form-label {
  width: 180rpx;
  font-size: 28rpx;
  color: #333;
}

.required::before {
  content: "*";
  color: #ff0000;
  margin-right: 4rpx;
}

.form-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.form-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  height: 40rpx;
  border: none;
}

.form-select {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-select-text {
  font-size: 28rpx;
  color: #999;
}

.select-arrow {
  font-size: 24rpx;
  color: #999;
}

.location-btn {
  position: absolute;
  right: 0;
  top: 30rpx;
  color: #0066ff;
  font-size: 28rpx;
}

/* 上传部分样式 */
.upload-item {
  padding: 30rpx 0;
  border-bottom: 1px solid #eee;
}

.upload-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.upload-content {
  display: flex;
}

.upload-btn {
  width: 160rpx;
  height: 160rpx;
  background-color: #f8f8f8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px dashed #ddd;
}

.upload-icon {
  font-size: 48rpx;
  color: #ccc;
  margin-bottom: 10rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #999;
}

.upload-preview {
  width: 160rpx;
  position: relative;
}

.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-btn {
  position: absolute;
  top: -14rpx;
  right: -8rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #f00;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
}
.delete-icon {
  font-size: 30rpx;
  color: #fff;
  position: absolute;
  top: -1px;
}

/* 保存按钮样式 */
.save-btn-container {
  padding: 12rpx 30rpx;
}

.save-btn {
  width: 100%;
  height: 90rpx;
  background-color: #0066ff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}
.address-text {
  flex: 1;
  margin-right: 60rpx;
}
</style>
